<template>
    <div>
        <van-cell title="立即注册" is-link to="/login" arrow-direction="left" class="modifyTop"/>
        <van-form @submit="onSubmit">
            <van-field
                    v-model="nickname"
                    name="账号"
                    label="账号"
                    placeholder="账号"
                    :rules="[{ required: true, message: '请填写账号' }]"
            />
            <van-field
                    v-model="username"
                    name="昵称"
                    label="昵称"
                    placeholder="昵称"
                    :rules="[{ required: true, message: '请填写昵称' }]"
            />

            <van-field
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写手密码' }]"
            />

            <van-field
                    v-model="phone"
                    name="手机号"
                    label="手机号"
                    placeholder="手机号"
                    :rules="[{ required: true, message: '请填写手手机号' }]"
            />
            <van-field
                    v-model="sms"
                    center
                    clearable
                    label="短信验证码"
                    placeholder="请输入短信验证码"
            >
                <template #button>
                    <van-button size="small" :disabled=disabled type="primary" @click="code">{{codeMsg}}</van-button>
                </template>
            </van-field>
            <van-button round block type="info" native-type="submit" @click="register">
                    提交
                </van-button>
        </van-form>
    </div>
</template>

<script>
    import {register,registerCode } from "../../../api/user-api"
    import { Notify } from 'vant';
    export default {
        name: "Collection",
        data() {
            return {
                nickname:"",
                username: '',
                password: '',
                phone:"",
                sms:"",
                // 是否禁用按钮
                disabled:false,
                // 倒计时秒数
                countdown: 60,
                // 按钮上的文字
                codeMsg: '获取验证码',
                // 定时器
                timer: null
            };
        },
        methods: {
            onSubmit(values) {
                // console.log('submit', values);
            },
            code(){
                registerCode(this.phone).then(res=>{
                    this.$toast('发送成功');
                    if (!this.timer) {
                        this.timer = setInterval(() => {
                            if (this.countdown > 0 && this.countdown <= 60) {
                                this.countdown--;
                                if (this.countdown !== 0) {
                                    this.disabled = true;
                                    this.codeMsg = "重新发送(" + this.countdown + ")";
                                } else {
                                    clearInterval(this.timer);
                                    this.codeMsg = "获取验证码";
                                    this.countdown = 60;
                                    this.timer = null;
                                    this.disabled = false;
                                }
                            }
                        }, 1000)
                    }})},
            register(){
                register(this.nickname,this.sms,this.phone,this.password,this.username).then(res=>{
                    // console.log(res)
                    if (res.code==0){
                        this.$toast('注册成功');
                        this.$router.push({path:"/login"})

                    }else {
                        this.$toast('注册失败');
                    }

                })
            }
        },
    }
</script>

<style scoped lang="less">
    .modifyTop{
        background: #EDEDED;
        height: 50px;
        /*line-height: 50px;*/
        font-size: 20px;
        text-align: center;

    }
</style>